﻿@page "/dropdown-datagrid"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    DropDownDataGrid
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>DropDownDataGrid</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of DropDownDataGrid
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>DropDownDataGrid</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridBindValue">
    <DropDownDataGridBindValue />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of DropDownDataGrid using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridChangeEvent">
    <DropDownDataGridChangeEvent />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Define Text and Value properties
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridTextValueProperties">
    <DropDownDataGridTextValueProperties />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    DropDownDataGrid with template
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridTemplate">
    <DropDownDataGridTemplate />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Define multiple columns
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridColumns">
    <DropDownDataGridColumns />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Filtering case sensitivity and filter operator
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridFiltering">
    <DropDownDataGridFiltering />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Custom filtering with <strong>LoadData</strong> event
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridFilteringLoadData">
    <DropDownDataGridFilteringLoadData />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Multiple selection
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridMultiple">
    <DropDownDataGridMultiple />
</RadzenExample>

<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridVirtualization">
    <DropDownDataGridVirtualization />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    DropDown virtualization with <strong>LoadData</strong> event
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridVirtualizationLoadData">
    <DropDownDataGridVirtualizationLoadData />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Control DropDown's DataGrid Density with <strong>Density</strong> parameter
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridDensity">
    <DropDownDataGridDensity />
</RadzenExample>